<template>
  <figure class="hearts">
    <section class="heart" v-for=" item in numArr" :key="item">
      <div class="plane plane-left">
        <div class="half-heart"></div>
      </div>
      <div class="plane plane-right">
        <div class="half-heart"></div>
      </div>
    </section>
  </figure>
</template>

<script>
export default {
  name: 'HeartIndex',
  props: {
    numArr: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>

.hearts {
  width: 50vw;
  height: 20vw;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.heart {
  width: 10vw;
  height: 10vw;
  /* border: 1px solid; */
  /* the snippet will be deleted */
}

.heart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plane {
  position: absolute;
  opacity: 0.8;
}

.half-heart {
  width: 5vw;
  height: 5vw;
  background-color: pink;
  transform: rotate(-45deg);
}

.heart {
  transform-style: preserve-3d;
}

.plane-right {
  transform: rotateY(90deg);
  /* 因为此处为 90 度垂直, 所以并不可见 */
}

.heart {
  animation: rotate 5s ease-in-out infinite;
}

.heart:nth-of-type(1) {
  animation-delay: -5s;
}

/* keyframes */
@keyframes rotate {
  0% {
    transform: rotateY(0deg) rotateZ(25deg) translateY(7.5vw);
  }

  50% {
    transform: rotateY(270deg) rotateZ(25deg) translateY(-7.5vw);
  }

  100% {
    transform: rotateY(360deg) rotateZ(25deg) translateY(7.5vw);
  }
}

.half-heart:before,
.half-heart:after {
  content: "";
  width: 5vw;
  height: 5vw;
  background-color: pink;
  border-radius: 100%;
  position: absolute;
}

.half-heart:before {
  top: -3.25vw;
  left: 0;
}

.half-heart:after {
  top: 0;
  left: 3.25vw;
}

.heart:nth-of-type(1) {
  animation-delay: -5s;
}

.heart:nth-of-type(2) {
  animation-delay: -4s;
}

.heart:nth-of-type(3) {
  animation-delay: -3s;
}

.heart:nth-of-type(4) {
  animation-delay: -2s;
}

.heart:nth-of-type(5) {
  animation-delay: -1s;
}

</style>
